<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Main</title>

    <link rel="stylesheet" type="text/css" href="main.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">

    <script type="text/montage-serialization">
    {
        "owner": {
            "values": {
                "element": {"#": "main"}
            }
        },
        "rangeController": {
            "prototype": "montage/core/range-controller",
            "values": {
                "content": {"<-": "@owner.data"}
            }
        },
        "treeController": {
            "prototype": "montage/core/tree-controller",
            "values": {
                "childrenPath": "regions",
                "data": {"<-": "@owner.tree"}
            }
        },
        "text": {
            "prototype": "montage/ui/text.reel",
            "values": {
                "element": {"#": "text"},
                "value": {"<-": "@owner.currentSegment"}
            }
        },
        "segmentedBar1": {
            "prototype": "montage/ui/segmented-bar.reel",
            "values": {
                "element": {"#": "segmentedBar1"},
                "data": {"<-": "@owner.data"}
            },
            "listeners": [
                {
                    "type": "action",
                    "listener": {"@": "owner"}
                }
            ]
        },
        "segment1": {
            "prototype": "montage/ui/segment.reel",
            "values": {
                "element": {"#": "segment1"},
                "label": {"<-": "@segmentedBar1:segment.object.region"},
                "length": {"<-": "@segmentedBar1:segment.object.size"}
            }
        },
        "segmentedBar2": {
            "prototype": "montage/ui/segmented-bar.reel",
            "values": {
                "element": {"#": "segmentedBar2"},
                "dataController": {"@": "rangeController"},
                "enabled": false
            },
            "listeners": [
                {
                    "type": "action",
                    "listener": {"@": "owner"}
                }
            ]
        },
        "segment2": {
            "prototype": "montage/ui/segment.reel",
            "values": {
                "element": {"#": "segment2"},
                "label": {"<-": "@segmentedBar2:segment.object.region"},
                "length": {"<-": "@segmentedBar2:segment.object.size"}
            }
        },
        "segmentedBar3": {
            "prototype": "montage/ui/segmented-bar.reel",
            "values": {
                "element": {"#": "segmentedBar3"},
                "dataController": {"@": "treeController"}
            },
            "listeners": [
                {
                    "type": "action",
                    "listener": {"@": "owner"}
                }
            ]
        },
        "segment3": {
            "prototype": "montage/ui/segment.reel",
            "values": {
                "element": {"#": "segment3"},
                "label": {"<-": "@segmentedBar3:segment.object.content.region"},
                "length": {"<-": "@segmentedBar3:segment.object.content.size"}
            }
        },
        "segmentedBar4": {
            "prototype": "montage/ui/segmented-bar.reel",
            "values": {
                "element": {"#": "segmentedBar4"},
                "dataController": {"@": "rangeController"},
                "orientation": "vertical"
            },
            "listeners": [
                {
                    "type": "action",
                    "listener": {"@": "owner"}
                }
            ]
        },
        "segment4": {
            "prototype": "montage/ui/segment.reel",
            "values": {
                "element": {"#": "segment4"},
                "label": {"<-": "@segmentedBar4:segment.object.region"},
                "length": {"<-": "@segmentedBar4:segment.object.size"}
            }
        }
    }
    </script>
</head>
<body>
    <div data-montage-id="main" class="Main">
        <h1>Data from event listener</h1>
        ActionEvent is fired upon press even when data didn't change; please open console to see log of events being fired.
        <pre data-montage-id="text"></pre>

        <h1>Desktop - data array</h1>
        <div class="desktop">
            <div data-montage-id="segmentedBar1">
                <div data-montage-id="segment1"></div>
            </div>
        </div>
        <br/>

        <h1>Desktop - RangeController + bootstrap, enabled=false</h1>
        <div class="desktop">
            <div data-montage-id="segmentedBar2" class="progress">
                <div data-montage-id="segment2" class="progress-bar progress-bar-striped"></div>
            </div>
        </div>
        <br/>

        <h1>Desktop - TreeController</h1>
        <div class="desktop">
            <div data-montage-id="segmentedBar3">
                <div data-montage-id="segment3"></div>
            </div>
        </div>
        <br/>

        <h1>Phone-portrait, orientation = vertical</h1>
        <div class="phone-portrait">
            <div data-montage-id="segmentedBar4">
                <div data-montage-id="segment4"></div>
            </div>
        </div>
    </div>
</body>
</html>
